<template>
  <a-modal v-model:visible="isShow" title="修改手机号" @ok="onSubmit">
    <a-form :model="formState" ref="formRef" v-bind="layout">
      <a-form-item label="当前手机号">
        {{ props.mobilePhone }}
      </a-form-item>
      <a-form-item label="新手机号" name="username" v-bind="validateInfos.username">
        <!-- <a-input size="large" v-model:value="formState.username" placeholder="请输入" /> -->
        <div class="form-input">
          <a-input :bordered="false" class="input-container" placeholder="请输入手机号" v-model:value="formState.username" />
        </div>
      </a-form-item>
      <a-form-item label="验证码" name="code" v-bind="validateInfos.code">
        <!-- <a-input size="large" v-model:value="formState.code" placeholder="请输入">
          <template #addonAfter>
            <span v-if="!codeLoading && countCurrent === CountNumber" class="fc-link fs-12"
              @click="onGetCode">发送验证码</span>
            <span class="fc-gray fs-12" v-else>{{ countCurrent }}s后重新获取</span>
          </template>
        </a-input> -->
        <div class="form-input">
          <a-input-password :bordered="false" class="input-container" placeholder="请输入验证码"
            v-model:value="formState.code" />
          <span v-if="!codeLoading && countCurrent === CountNumber" class="captcha-btn" @click="onGetCode">获取验证码</span>
          <span v-else class="wait-btn">{{ countCurrent }}s后获取</span>
        </div>
      </a-form-item>
      <!-- <a-button type="primary" class="submit-btn" @click="onSubmit">提交</a-button> -->
    </a-form>
    <template #footer>
      <div class="g-modal-buttons">
        <div class="g-close-button" @click="onClose">
          取消
        </div>
        <div class="g-submit-button" @click="onSubmit">
          提交
        </div>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useFormValidator } from './useFormValidator'
import { useSendCode } from './useSendCode'
import { message } from 'ant-design-vue'
import { getUserInfo, sendCaptcha, bindMobilePhone } from '@r/api/user'
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const emits = defineEmits<{
  (emit: 'close'): void,
  (emit: 'ok'): void,
}>()
const props = defineProps<{
  visible: boolean
  mobilePhone: string
}>()
const isShow = computed({
  get() {
    return props.visible
  },
  set() {
    emits('close')
  }
})
let formRef = ref()
let formState = ref({
  username: '',
  password: '',
  code: ''
})
const { validateInfos, validate } = useFormValidator(formState)
const { CountNumber, codeLoading, countCurrent, handleGetCode } = useSendCode()
const onGetCode = () => {
  formRef.value.validate('username')
    .then(() => {
      handleGetCode(formState.value.username)
    })
    .catch((r: any) => {
      message.warn('请输入正确的手机号')
      console.log(r);
    })
}
function onClose() {
  emits('close')
}
const onSubmit = async () => {
  console.log(117, validateInfos)
  await validate()
  bindMobilePhone({
    mobilePhone: formState.value.username,
    captcha: formState.value.code,
  })
  isShow = false
  console.log(119)
}
</script>

<style scoped>
.form-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* margin-top: 20px; */
  width: 100%;

  .input-container {
    height: 32px;
    border-radius: 4px;
    background: #FFFFFF;
    box-sizing: border-box;
    border: 1px solid #DCDCDC;
    flex: 1;
  }

  .captcha-btn {
    width: 110px;
    height: 32px;
    border-radius: 4px;
    opacity: 1;
    background: #FFFFFF;
    box-sizing: border-box;
    border: 1px solid #FF6923;
    margin-left: 15px;
    color: #FF6923;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }

  .wait-btn {
    width: 110px;
    height: 32px;
    border-radius: 4px;
    opacity: 1;
    background: #FFFFFF;
    box-sizing: border-box;
    border: 1px solid #D1D1D1;
    margin-left: 15px;
    color: #D1D1D1;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>